<template>
  <div class="markdown">
    <h1>头部</h1>
    <a-row :gutter="20">
      <a-col :span="24">
        <MdPreview :val="demo1" :show="false" desName="头部一">
          <template slot="code">
            <Head1 />
          </template>
          <template slot="des">
              <p><span>图片下载：</span></p>
              <ul>
                <li><a @click="downloadBtn(fileList1, 'head1.zip')">head1.zip</a></li>
              </ul>
          </template>
        </MdPreview>
        <MdPreview :val="demo2" :show="false" desName="头部二">
          <template slot="code">
            <div style="overflow: hidden">
              <Head2 />
            </div>
          </template>
          <template slot="des">
              <p><span>图片下载：</span></p>
              <ul>
                <li><a @click="downloadBtn(fileList2, 'head2.zip')">head2.zip</a></li>
              </ul>
          </template>
        </MdPreview>
        <MdPreview :val="demo3" :show="false" desName="头部三">
          <template slot="code">
            <div style="overflow: hidden">
              <Head3 />
            </div>
          </template>
          <template slot="des">
              <p><span>图片下载：</span></p>
              <ul>
                <li><a @click="downloadBtn(fileList3, 'head3.zip')">head3.zip</a></li>
              </ul>
          </template>
        </MdPreview>
        <MdPreview :val="demo4" :show="false" desName="头部四">
          <template slot="code">
              <Head4 />
          </template>
          <template slot="des">
              <p><span>图片下载：</span></p>
              <ul>
                <li><a @click="downloadBtn(fileList4, 'head4.zip')">head4.zip</a></li>
              </ul>
          </template>
        </MdPreview>
        <MdPreview :val="demo5" :show="false" desName="头部五">
          <template slot="code">
            <Head5 />
          </template>
          <template slot="des">
              <p><span>图片下载：</span></p>
              <ul>
                <li><a @click="downloadBtn(fileList5, 'head5.zip')">head5.zip</a></li>
              </ul>
          </template>
        </MdPreview>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { download } from '@/mixins/download.js';

import Head1 from "@/views/comps/components/head1.vue";
import Head2 from "@/views/comps/components/head2.vue";
import Head3 from "@/views/comps/components/head3.vue";
import Head4 from "@/views/comps/components/head4.vue";
import Head5 from "@/views/comps/components/head5.vue";
export default {
    mixins: [download],
    components: {
      Head1,
      Head2,
      Head3,
      Head4,
      Head5,
    },
    data() {
      return {
        demo1: `
<template>
  <div class="head1">
    <div class="head-bg">
      <div class="head-name">可视化头部标题</div>
      <ul class="head-left">
        <li class="head-left-ele">
          <a class="pT10" style="display: block; color: #42f7f9;">首页</a>
        </li>
        <li class="head-left-ele on">
          <p class="pT10">菜单1</p>
        </li>

      </ul>
      <ul class="head-right">
        <li class="head-right-ele">
          <p class="pT10">菜单2</p>
        </li>
        <li class="head-right-ele">
          <p class="pT10">菜单3</p>
        </li>

      </ul>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {

      }
    }
}
<\/script>

<style lang="less" scoped>
.head1 .head-bg{background: url(~@/assets/images/head/head1/head_bg.png) no-repeat center top; width: 100%;height: 95px;text-align: center;position: relative;}
.head1 .head-name{
  background-image: linear-gradient(to bottom, #cdf7f9, #0cd9d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-top: 5px;
  font-size: 36px;
}
.head1 .head-left-ele{width: 170px;height: 42px;display: inline-block;background: url(~@/assets/images/head/head1/head_nav_bg.png); font-size: 16px;}
.head1 .head-left-ele.on{width: 170px;height: 42px;display: inline-block;background: url(~@/assets/images/head/head1/head_nav_bg_on.png);}
.head1 .head-left{position: absolute;top: 35px;left:calc(50% - 570px);cursor: pointer;}

.head1 .head-right-ele {width: 170px;height: 42px;display: inline-block;background: url(~@/assets/images/head/head1/head_nav_bg1.png); font-size: 16px;}
.head1 .head-right-ele.on{width: 170px;height: 42px;display: inline-block;background: url(~@/assets/images/head/head1/head_nav_bg1_on.png);}
.head1 .head-right{position: absolute;top: 35px;right:calc(50% - 570px);cursor: pointer;}

.head1 .head-left-ele:hover{background: url(~@/assets/images/head/head1/head_nav_bg_on.png);}
.head1 .head-right-ele:hover{background: url(~@/assets/images/head/head1/head_nav_bg1_on.png);}

.head1 .head-left li:last-child{
  margin-left: -28px;
}
.head1 .head-right li:last-child{
  margin-left: -28px;
}
</style>
        `,
        demo2: `
<template>
  <div class="head2">
    <div class="head_main">
      <div class="head_name">可视化头部标题</div>
      <span class="shadow_line"><i class="moves1a"></i></span>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {

      }
    }
}
<\/script>

<style lang="less" scoped>
.head2 { position: relative; width: 1920px; height: 75px; top: 0; left: 50%; transform: translate(-50%, 0); z-index: 20;}
.head2 .head_name {
  padding-top: 5px;
  font-size: 40px;
  background-image: linear-gradient(to bottom, #fff, #d5dcdf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
.head2 .head_main { position: absolute; width: 1920px; height: 75px; background: url(~@/assets/images/head/head2/logo_con.png) no-repeat; left: 50%; margin-left: -960px; text-align: center;}
.head2 .head_main .shadow_line { position: absolute; height: 100%; width: 600px; left: 50%; margin-left: -200px;}
.head2 .head_main i { display: block; position: absolute; background: url(~@/assets/images/head/head2/logo_con_shadow.png); width: 809px; height: 124px; left: 50%; margin-left: -404px; bottom: 15px;}
.moves1a { animation: 2s linear 0s normal infinite running moves1a;}
@keyframes moves1a {
  0% {
    left: 0%;
    opacity: 0.6;
  }
  30% {
    left: 30%;
    opacity: 1;
  }
  60% {
    left: 60%;
    opacity: 0.6;
  }
  100% {
    left: calc(100% - 90px);
    opacity: 0;
  }
}
</style>
        `,
        demo3: `
<template>
  <div class="head3">
    <div class="head_a">
      <i class="head_a_l" style=""></i>
      <i class="head_a_c">
        <p class="head_time">统计时间：2018-10-10</p>
      </i>
      <i class="head_a_r"></i>
    </div>
    <div class="head_c"><h2>可视化头部标题</h2></div>
    <div class="head_b">
      <i class="head_a_l"></i>
      <i class="head_b_c">
        <ul class="ul_head">
          <li class="ul_head_1">
            <a href="#">
              菜单1
            </a>
          </li>
          <li class="ul_head_2 active">
            <a href="#">
              菜单2
            </a>
          </li>
          <li class="ul_head_3">
            <a href="#">
              菜单3
            </a>
          </li>
          <li class="ul_head_4">
            <a href="#">
              菜单4
            </a>
          </li>
        </ul>
      </i>
      <i class="head_a_r"></i>
    </div>
    <i class="moves1"></i>
  </div>
</template>

<script>
export default {
    data() {
      return {

      }
    }
}
<\/script>

<style lang="less" scoped>
.head3 .head_c{height:52px ; width:469px ; margin-left: -35px; background: url(~@/assets/images/head/head3/logo_c.png) no-repeat center center; display: inline-block; float: left; text-align: center; padding-top: 2px;}
.head3 .head_c h2{
  font-size: 28px;
  background-image: linear-gradient(to bottom, #fff, #bfecfd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.head3 .head_a{height: 52px; width: calc(40% - 150px); position: relative; display: inline-block; float: left; left: 10px;}
.head3 .head_a_l{position: absolute; top: 0px; width: 50px;}
.head3 .head_a i{display: inline-block; position: absolute; height: 52px;}
.head3 .head_a .head_a_l{background: url(~@/assets/images/head/head3/logo_a.png) no-repeat; left: 0px; }
.head3 .head_a_r{position: absolute; top: 0px; width: 83px;background: url(~@/assets/images/head/head3/logo_b.png)  no-repeat; right: 0px; left: auto;}
.head3 .head_b{width: calc(60% - 250px); position: absolute; display: inline-block; height: 52px; right: 10px;}
.head3 .head_b .head_a_l{background: url(~@/assets/images/head/head3/logo_b1.png)  no-repeat;left: 0px; width: 83px; height: 52px;}
.head3 .head_a .head_a_c{width: calc(100% - 133px); display: inline-block;float: left; background: url(~@/assets/images/head/head3/logo_c1.png) no-repeat; background-size:100% 100% ;position: absolute; left: 50px; top: 0px;}
.head3 .head_b .head_b_c{width: calc(100% - 133px); display: inline-block;float: left; background: url(~@/assets/images/head/head3/logo_c2.png) no-repeat; background-size:100% 100% ; height: 52px; position: absolute; top: 0px; left: 83px;}
.head3 .head_b .head_a_r{width: 50px; height: 52px; background: url(~@/assets/images/head/head3/logo_a1.png) no-repeat top; background-size:100% 100% ; position: absolute; right: 0px;}
.head3 .head_time{font-size: 14px; color: #c8f7ff; font-style: initial; padding-top: 14px; margin-left: -10px;}
.head3 .ul_head{float: right; display: inline-block; height: 40px; line-height: 40px; margin-top: 4px; font-style: initial;}
.head3 .ul_head li{float:left; margin-right: 10px; margin-left: 20px;}
.head3 .ul_head li a{display: block; padding-left: 36px; color: #c8f7ff; font-size: 18px;}
.head3 .ul_head_1 a{background: url(~@/assets/images/head/head3/icon_head_a.png) no-repeat left center;}
.head3 .ul_head_1 a:hover,.head3 .ul_head_1.active a{background: url(~@/assets/images/head/head3/icon_head_a1.png) no-repeat left center; color: #f7e852;}
.head3 .ul_head_2 a{background: url(~@/assets/images/head/head3/icon_head_b.png) no-repeat left center;}
.head3 .ul_head_2 a:hover,.head3 .ul_head_2.active a{background: url(~@/assets/images/head/head3/icon_head_b1.png) no-repeat left center; color: #f7e852;}
.head3 .ul_head_3 a{background: url(~@/assets/images/head/head3/icon_head_c.png) no-repeat left center;}
.head3 .ul_head_3 a:hover,.head3 .ul_head_3.active a{background: url(~@/assets/images/head/head3/icon_head_c1.png) no-repeat left center; color: #f7e852;}
.head3 .ul_head_4 a{background: url(~@/assets/images/head/head3/icon_head_d.png) no-repeat left center;}
.head3 .ul_head_4 a:hover,.head3 .ul_head_4.active a{background: url(~@/assets/images/head/head3/icon_head_d1.png) no-repeat left center; color: #f7e852;}
</style>
        `,
        demo4: `
<template>
  <div class="head4">
    <div class="top_center">
      <h2>可视化头部标题</h2>
    </div>
    <div class="top_left top_nav">
      <ul>
        <li class="on">
          <a>
            <span>菜单1</span>
          </a>
        </li>
        <li>
          <a>
            <span>菜单2</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="top_right top_nav">
      <ul>
        <li>
          <a>
            <span>菜单3</span>
          </a>
        </li>
        <li>
          <a>
            <span>菜单4</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {

      }
    }
}
<\/script>

<style lang="less" scoped>
.head4 {
  width: 100%;
  height: 91px;
  margin: 0px auto;
  text-align: center;
  position: relative;
  z-index: 99;
}

.top_center {
  position: absolute;
  background: url(~@/assets/images/head/head4/top_bg_c.png) no-repeat center;
  height: 91px;
  width: 100%;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
}

.top_center h2{
  font-size: 44px;
  font-weight: bold;
  position: relative;
  z-index: 2;
  color: #d3f5ff;
  -webkit-mask:linear-gradient(to bottom, #d3f5ff, #d3f5ff, transparent );
  text-shadow: 0 3px 5px #0d497e;
}

.top_nav ul {
  display: inline-block;
  padding-top: 40px;
}

.top_nav ul li a {
  display: block;
  cursor: pointer;
  line-height: 44px;
  font-size: 22px;
  font-weight: bold;
}

.top_nav ul li a span {
  background-image: -webkit-linear-gradient(top, #fff, #6adae2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f7feff;
  line-height: 22px;
}

.top_nav ul li:hover a span,
.top_nav ul li.on a span {
  background-image: -webkit-linear-gradient(top, #fed35e, #eaa80a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top_left {
  position: absolute;
  right: calc(50% + 270px);
}

.top_left ul li {
  float: left;
  width: 157px;
  height: 44px;
  text-align: center;
  background: url(~@/assets/images/head/head4/top_bg_l.png) no-repeat;
  margin-left: -15px;
}

.top_left ul li:hover,
.top_left ul li.on {
  background: url(~@/assets/images/head/head4/top_bg_l_on.png) no-repeat;
}

.top_right {
  position: absolute;
  left: calc(50% + 285px);
}

.top_right ul li {
  float: left;
  width: 157px;
  height: 44px;
  text-align: center;
  background: url(~@/assets/images/head/head4/top_bg_r.png) no-repeat;
  margin-left: -15px;
}

.top_right ul li:hover,
.top_right ul li.on {
  background: url(~@/assets/images/head/head4/top_bg_r_on.png) no-repeat;
}
</style>
        `,
        demo5: `
 <template>
  <div class="head5">
    <span>可视化头部标题</span>
  </div>
</template>

<script>
export default {
    data() {
      return {

      }
    }
}
<\/script>

<style lang="less" scoped>
.head5 { height: 91px; text-align: center; background: url(~@/assets/images/head/head5/logo_bg.png) no-repeat center top; position: relative;}
.head5 span { display: inline-block; font-size: 36px; color: #fff; font-weight: 400; background-image:-webkit-linear-gradient(top,#fff,#c8ffff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height: 70px;
  letter-spacing: 4px;
  font-family: 'Microsoft YaHei'
}
</style>
        `,
        fileList1: [
          {
            fileName: 'head_bg.png',
            feilePath: '/static/head/head1/head_bg.png'
          },{
            fileName: 'head_nav_bg.png',
            feilePath: '/static/head/head1/head_nav_bg.png'
          },{
            fileName: 'head_nav_bg_on.png',
            feilePath: '/static/head/head1/head_nav_bg_on.png'
          },{
            fileName: 'head_nav_bg1.png',
            feilePath: '/static/head/head1/head_nav_bg1.png'
          },{
            fileName: 'head_nav_bg1_on.png',
            feilePath: '/static/head/head1/head_nav_bg1_on.png'
          },
        ],
        fileList2: [
          {
            fileName: 'logo.png',
            feilePath: '/static/head/head2/logo.png'
          },{
            fileName: 'logo_con.png',
            feilePath: '/static/head/head2/logo_con.png'
          },{
            fileName: 'logo_con_shadow.png',
            feilePath: '/static/head/head2/logo_con_shadow.png'
          }
        ],
        fileList3: [
          {
            fileName: 'icon_head_a.png',
            feilePath: '/static/head/head3/icon_head_a.png'
          },{
            fileName: 'icon_head_a1.png',
            feilePath: '/static/head/head3/icon_head_a1.png'
          },{
            fileName: 'icon_head_b.png',
            feilePath: '/static/head/head3/icon_head_b.png'
          },{
            fileName: 'icon_head_b1.png',
            feilePath: '/static/head/head3/icon_head_b1.png'
          },{
            fileName: 'icon_head_b1.png',
            feilePath: '/static/head/head3/icon_head_b1.png'
          },{
            fileName: 'icon_head_c.png',
            feilePath: '/static/head/head3/icon_head_c.png'
          },{
            fileName: 'icon_head_c1.png',
            feilePath: '/static/head/head3/icon_head_c1.png'
          },{
            fileName: 'icon_head_c1.png',
            feilePath: '/static/head/head3/icon_head_c1.png'
          },{
            fileName: 'icon_head_d.png',
            feilePath: '/static/head/head3/icon_head_d.png'
          },{
            fileName: 'icon_head_d1.png',
            feilePath: '/static/head/head3/icon_head_d1.png'
          },{
            fileName: 'logo_a.png',
            feilePath: '/static/head/head3/logo_a.png'
          },{
            fileName: 'logo_a1.png',
            feilePath: '/static/head/head3/logo_a1.png'
          },{
            fileName: 'logo_b.png',
            feilePath: '/static/head/head3/logo_b.png'
          },{
            fileName: 'logo_b1.png',
            feilePath: '/static/head/head3/logo_b1.png'
          },{
            fileName: 'logo_c.png',
            feilePath: '/static/head/head3/logo_c.png'
          },{
            fileName: 'logo_c1.png',
            feilePath: '/static/head/head3/logo_c1.png'
          },{
            fileName: 'logo_c2.png',
            feilePath: '/static/head/head3/logo_c2.png'
          },
        ],
        fileList4: [
          {
            fileName: 'top_bg_c.png',
            feilePath: '/static/head/head4/top_bg_c.png'
          },{
            fileName: 'top_bg_l.png',
            feilePath: '/static/head/head4/top_bg_l.png'
          },{
            fileName: 'top_bg_l_on.png',
            feilePath: '/static/head/head4/top_bg_l_on.png'
          },{
            fileName: 'top_bg_r.png',
            feilePath: '/static/head/head4/top_bg_r.png'
          },{
            fileName: 'top_bg_r_on.png',
            feilePath: '/static/head/head4/top_bg_r_on.png'
          }
        ],
        fileList5: [
          {
            fileName: 'logo_bg.png',
            feilePath: '/static/head/head5/logo_bg.png'
          },
        ],
      }
    },
}
</script>

<style scoped>

</style>